import React from 'react'
import PropTypes from 'prop-types'
import {padLeft, range} from '../utility'

class MonthPicker extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isOpen: false,
            selectedYear: this.props.year
        }
    }

    selectYear = (event, yearNumber) => {
        event.preventDefault()
        this.setState({
            selectedYear: yearNumber
        })
    }
    selectMonth = (event, monthNumber) => {
        event.preventDefault()
        this.setState({
            isOpen: false
        })
        this.props.onChange(this.state.selectedYear, monthNumber)
    }
    toggleDropdown = (event) => {
        event.preventDefault()
        this.setState({
            isOpen: !this.state.isOpen,
        })
    }

    render() {
        const {year, month} = this.props
        const {isOpen, selectedYear} = this.state
        const monthRange = range(12, 1)
        let yearstart = year - 4
        const yearRange = range(9, yearstart)
        return (
            <div className="dropdown month-picker-components">
                <h4>选择月份</h4>
                <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        onClick={this.toggleDropdown}
                >
                    {`${year}年 ${padLeft(month)}月`}
                </button>
                {isOpen &&
                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton" style={{display: 'block'}}>
                    <div className="row">
                        <div className="col border-right">
                            {yearRange.map((yearNumber, index) =>
                                <span
                                    onClick={(event) => {
                                        this.selectYear(event, yearNumber)
                                    }}
                                    key={index}
                                    className={(yearNumber === selectedYear) ? "dropdown-item active text-white" : "dropdown-item"}
                                >
                                    {yearNumber} 年
                                </span>
                            )}
                        </div>
                        <div className="col">
                            {monthRange.map((monthNumber, index) =>
                                <span
                                    onClick={(event) => {this.selectMonth(event, monthNumber)}}
                                    key={index}
                                    className={(monthNumber === month) ? "dropdown-item active text-white" : "dropdown-item"}
                                >
                                    {padLeft(monthNumber)} 月
                                </span>
                            )}
                        </div>
                    </div>
                </div>
                }
            </div>
        )
    }
}

MonthPicker.propTypes = {
    year: PropTypes.number.isRequired,
    month: PropTypes.number.isRequired,
    onChange: PropTypes.func.isRequired,
}
export default MonthPicker